<template>
  <div>
    <el-pagination
      id="pagination"
      background
      :page-size="pageSize"
      :pager-count="9"
      layout="prev, pager, next"
      :total="total"
      prev-text="< 上一页"
      next-text="下一页 >"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
    name:'Pagination',
  data() {
    return {
        
    }
    
  },
  props: {
    //当前页码
    currentPage: {
      type: Number,
      default: 1,
    },
    //每页条数
    pageSize: {
      type: Number,
      default: 5,
    },
    //总数
    total: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 将当前页数发送给需要的组件
       this.$emit("currentChange",val)
    }
  }
}
</script>

<style lang="less">
#pagination {
  text-align: center;
  li {
    border: 1px solid #ccc;
    background-color: white;
    font-weight: normal;
    color: black;
  }

  .el-icon-more {
    border: none;
  }
  button {
    padding: 0 10px;
    border: 1px solid #ccc;
  }
}
</style>
